<template>
  <div class="todo">
    <div class="titleline">
        <slot name="stateinfo"></slot>
        <div class="box">
            <span>{{value.length}}</span>
        </div>
    </div>
    <ul class="listline">
        <li class="libox" v-for="(item,index) in value " :key=index>
            <div class="leftli">
                <input type="checkbox" @click.prevent="change(item.id)" :checked='item.isChecked'>
                <span>{{item.info}}</span>
            </div>
            <div class="rightli" @click="deletelist(item.id)">
                <i class="iconfont icon-shanchu"></i>
            </div>
        </li>
        
    </ul>
  </div>
</template>

<script>



export default {
    props:{value:Array},
    data(){
        return{
            
        }
    },
    methods:{
        change:function(idnum){
            this.value.forEach(function(item){
                if(item.id === idnum){
                    item.isChecked = !item.isChecked
                }
            })
        },
        deletelist:function(idnum){
          this.value = this.value.filter(function(item){
                return item.id != idnum
            })
            this.$emit('deletelist',idnum)
        }
    }
    
    
}

</script>

<style scoped lang='scss'>
.todo{
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
    .titleline{
        display: flex;
        justify-content: space-between;
        
        .box{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #87ceeb;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 25px;
        }
    }
    .listline{
        width: 100%;
        .libox{
            background-color: #fff;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            .leftli{
                font-size: 25px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .rightli{
                cursor: pointer;
                i{
                    font-size: 25px;
                }
            }
        }
    }
}
</style>